<template>
  <ContentDetailWrap>
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
      <BaseButton type="primary" :loading="loading" @click="submit(true)">
        {{ t('order.approved') }}
      </BaseButton>
      <BaseButton type="danger" :loading="loading" @click="submit(false)">
        {{ t('common.reject') }}
      </BaseButton>
    </template>
    <div class="w-full flex justify-between">
      <div class="w-85%">
        <!--  主内容-->
        <div class="flex my-20px text-14px">
          <span class="font-bold">{{ t('order.currentNode') }}：</span>
          <span>{{ useEnumeratePicker(reviewNodeList, form.review_node) }}</span>
        </div>
        <!--    展示字段-->
        <Descriptions :schema="descriptionSchema" :data="form" />

        <!--    商品信息-->
        <div class="flex my-20px text-14px font-bold">{{ t('order.productInfo') }}</div>
        <el-table
          :data="itemList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('wholesalOrder.warehouse')"
            prop="warehouse_name"
            :width="calculateColumnWidth(itemList, 'warehouse_name')"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            :label="t('wholesalOrder.code')"
            prop="code"
            :width="calculateColumnWidth(itemList, 'code')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.name')"
            prop="product_name"
            :width="calculateColumnWidth(itemList, 'product_name')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.type')"
            :width="calculateColumnWidth(itemList, 'is_futures')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(warehouseTypeList, row.is_futures) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.arrivalDate')"
            prop="arrival_date"
            :width="calculateColumnWidth(itemList, 'arrival_date')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.realArrivalDate')"
            prop="real_arrival_date"
            :width="calculateColumnWidth(itemList, 'real_arrival_date')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.originalPrice')"
            :width="calculateColumnWidth(itemList, 'original_price')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.original_price }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.discountedPrice')"
            :width="calculateColumnWidth(itemList, 'actual_price')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.actual_price }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.theActualPricePaid')"
            :width="calculateColumnWidth(itemList, 'price_selected_currency')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.price_selected_currency }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.quantity')"
            prop="quantity"
            :width="calculateColumnWidth(itemList, 'quantity')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.theQuantityToBeShipped')"
            prop="pending_quantity"
            :width="calculateColumnWidth(itemList, 'pending_quantity')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.brand')"
            :width="calculateColumnWidth(itemList, 'brand')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(brandList, row.brand) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.computingPower')"
            prop="hashrate"
            :width="calculateColumnWidth(itemList, 'hashrate')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.warranty')"
            prop="expiration_date"
            :width="calculateColumnWidth(itemList, 'expiration_date')"
            :show-overflow-tooltip="true"
          />
        </el-table>

        <!--    原始商品信息-->
        <div class="flex my-20px text-14px font-bold">{{ t('order.originalProductInfo') }}</div>
        <el-table
          :data="originalItemList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('wholesalOrder.warehouse')"
            :width="calculateColumnWidth(originalItemList, 'warehouse_name')"
            prop="warehouse_name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.code')"
            prop="code"
            :width="calculateColumnWidth(originalItemList, 'code')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.name')"
            prop="product_name"
            :width="calculateColumnWidth(originalItemList, 'product_name')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.type')"
            :width="calculateColumnWidth(originalItemList, 'is_futures')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(warehouseTypeList, row.is_futures) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.arrivalDate')"
            prop="arrival_date"
            :width="calculateColumnWidth(originalItemList, 'arrival_date')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.realArrivalDate')"
            prop="real_arrival_date"
            :width="calculateColumnWidth(originalItemList, 'real_arrival_date')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.originalPrice')"
            :width="calculateColumnWidth(originalItemList, 'original_price')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.original_price }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.discountedPrice')"
            :width="calculateColumnWidth(originalItemList, 'actual_price')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.actual_price }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.theActualPricePaid')"
            :width="calculateColumnWidth(originalItemList, 'actual_quoted_currency_name')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.price_selected_currency }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.quantity')"
            prop="quantity"
            :width="calculateColumnWidth(originalItemList, 'quantity')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.theQuantityToBeShipped')"
            prop="pending_quantity"
            :width="calculateColumnWidth(originalItemList, 'pending_quantity')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.brand')"
            :width="calculateColumnWidth(originalItemList, 'brand')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(brandList, row.brand) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.computingPower')"
            prop="hashrate"
            :width="calculateColumnWidth(originalItemList, 'hashrate')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.warranty')"
            prop="expiration_date"
            :width="calculateColumnWidth(originalItemList, 'expiration_date')"
            :show-overflow-tooltip="true"
          />
        </el-table>

        <!--    支付信息-->
        <div class="flex my-20px text-14px font-bold">支付信息</div>
        <el-table
          :data="payTableList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('order.paymentMethod')"
            :width="calculateColumnWidth(payTableList, 'pay_method')"
            prop="payment_method_name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.receivingAccountNumber')"
            prop="pay_account"
            :width="calculateColumnWidth(payTableList, 'pay_account')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.transactionTicketNumber')"
            prop="voucher_code"
            :width="calculateColumnWidth(payTableList, 'voucher_code')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.proofOfTransfer')"
            :width="calculateColumnWidth(payTableList, 'voucher')"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              <el-image
                v-if="row.transfer_voucher_url && row.transfer_voucher_url.length > 0"
                style="width: 100px; height: 100px"
                :src="row.transfer_voucher_url[0].url"
                :preview-teleported="true"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="row.transfer_voucher_url.map((item) => item.url)"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.paymentTrackingCode')"
            prop="pay_code"
            :width="calculateColumnWidth(payTableList, 'pay_code')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentCurrency')"
            prop="pay_currency_name"
            :width="calculateColumnWidth(payTableList, 'pay_currency_name')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentLinks')"
            prop="payment_url"
            :width="calculateColumnWidth(payTableList, 'payment_url')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentTime')"
            prop="pay_time"
            :width="calculateColumnWidth(payTableList, 'pay_time')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.theAmountToBePaid')"
            prop="paid_amount"
            :width="calculateColumnWidth(payTableList, 'paid_amount')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentStatus')"
            prop="status_text"
            :width="calculateColumnWidth(payTableList, 'status_text')"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            :label="t('wholesalOrder.notes')"
            prop="notes"
            :width="calculateColumnWidth(payTableList, 'notes')"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.reviewers')"
            prop="reviewer_name"
            :width="calculateColumnWidth(payTableList, 'reviewer_name')"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            :label="t('wholesalOrder.reviewTime')"
            prop="reviewer_time"
            :width="calculateColumnWidth(payTableList, 'reviewer_time')"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <!--    自提信息-->
        <div v-if="form.delivery_method === 0">
          <div class="flex my-20px text-14px font-bold">自提信息</div>
          <el-table
            :data="selfPickupTableList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              :label="t('order.pickupCode')"
              prop="pickup_code"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.pickUpAddress')"
              prop="pickup_address"
              min-width="400"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.theNameOfThePersonWhoPickedUpTheGoods')"
              prop="pickup_name"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.pickUpPersonSPhoneNumber')"
              prop="pickup_phone"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.passportOfThePersonPickingUpTheGoods')"
              prop="pickup_passport"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.pickUpPersonSVehicleInformation')"
              prop="pickup_vehicle"
              min-width="200"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
        <div v-if="form.delivery_method === 1">
          <!--    收货信息-->
          <div class="flex my-20px text-14px font-bold">收货信息</div>
          <el-table
            :data="receivingTableList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              :label="t('order.consignee')"
              prop="name"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.phone')"
              prop="phone"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.email')"
              prop="email"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.zipCode')"
              prop="zip_code"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.address')"
              prop="address"
              min-width="350"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.alternateAddress')"
              prop="address2"
              min-width="350"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.company')"
              prop="company"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.aging')"
              min-width="200"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(agingList, row.prescription) }}
              </template>
            </el-table-column>
          </el-table>
          <!--    物流信息-->
          <div class="flex my-20px text-14px font-bold">物流信息</div>
          <el-table
            :data="logisticsTableList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              :label="t('order.logisticsCompanies')"
              min-width="200"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(logisticsCompanyList, row.company) }}
              </template>
            </el-table-column>
            <el-table-column
              :label="t('order.trackingNumber')"
              prop="logistics_no"
              min-width="250"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.logisticsVouchers')"
              min-width="250"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <div v-if="row.logistics_voucher && row.logistics_voucher.length">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="row.logistics_voucher[0]"
                    :preview-teleported="true"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="row.logistics_voucher"
                    fit="cover"
                  />
                  <div>{{ `共${row.logistics_voucher.length}张` }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="t('order.cost')"
              prop="cost"
              min-width="200"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
      </div>
      <!--      时间线-->
      <TimeLine class="w-15%" :data="timeLineList" />
    </div>
  </ContentDetailWrap>
</template>
<script setup lang="tsx">
import TimeLine from './components/TimeLine/index.vue'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { useEnumeratePicker, calculateColumnWidth } from '@/utils'
import { ElMessageBox } from 'element-plus'
import { approvedDataApi, getOrderEnumApi, getReviewDetailApi } from '@/api/order'
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const source = ref<string>('')

const loading = ref<boolean>(false)
const routerParams = ref<Record<string, any>>({})

const form = ref<Record<string, any>>({})

const itemList = ref<Array<Record<string, any>>>([])
const originalItemList = ref<Array<Record<string, any>>>([])
const payTableList = ref<Array<Record<string, any>>>([])
const selfPickupTableList = ref<Array<Record<string, any>>>([])
const receivingTableList = ref<Array<Record<string, any>>>([])
const logisticsTableList = ref<Array<Record<string, any>>>([])
const timeLineList = ref<Array<Record<string, any>>>([])

const receiptMethodList = ref<Array<Record<string, any>>>([])
const orderStatusList = ref<Array<Record<string, any>>>([])
const paymentStatusList = ref<Array<Record<string, any>>>([])
const operatorList = ref<Array<Record<string, any>>>([])

const brandList = ref<Array<Record<string, any>>>([])
const currentList = ref<Array<Record<string, any>>>([])
const warehouseList = ref<Array<Record<string, any>>>([])
const warehouseTypeList = ref<Array<Record<string, any>>>([])

const paymentMethodList = ref<Array<Record<string, any>>>([])
const agingList = ref<Array<Record<string, any>>>([])
const logisticsCompanyList = ref<Array<Record<string, any>>>([])
const itemPayStatusList = ref<Array<Record<string, any>>>([])
const reviewNodeList = ref<Array<Record<string, any>>>([])

const descriptionSchema = ref<DescriptionsSchema[]>([
  {
    field: 'user',
    label: t('order.customer')
  },
  {
    field: 'order_no',
    label: t('order.orderCode')
  },
  {
    field: 'total_amount',
    label: t('order.theTotalAmountOfTheOrder')
  },
  {
    field: 'order_status',
    label: t('order.orderStatus'),
    slots: {
      default: (data: Record<string, any>) => {
        const statusMap = {
          10: '#FFA500', // 黄色 - 待处理
          20: '#FFD700', // 黄色
          21: '#32CD32', // 绿色
          30: '#1E90FF', // 蓝色
          40: '#9370DB', // 紫色
          50: '#20B2AA', // 青色
          70: '#c8c9cc', // 红色 - 已取消
          100: '#67c23a' // 绿色 - 已完成
        }
        const color = statusMap[data.order_status] || 'var(--el-color-warning)'
        return (
          <span
            style={`color: ${color}; background-color: var(--el-color-info-light-9); font-weight: 600; font-size: 12px; padding: 5px 15px; border-radius: 4px`}
          >
            {useEnumeratePicker(orderStatusList.value, data.status)}
          </span>
        )
      }
    }
  },
  {
    field: 'pay_amount',
    label: t('order.theAmountToBePaid')
  },
  {
    field: 'pay_status',
    label: t('order.payStatus'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(paymentStatusList.value, data.pay_status)}</span>
      }
    }
  },
  {
    field: 'logistics_fee',
    label: t('order.logistics_fee')
  },
  {
    field: 'delivery_method',
    label: t('order.receiptMethod'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(receiptMethodList.value, data.delivery_method)}</span>
      }
    }
  },
  {
    field: 'create_time',
    label: '创建时间'
  },
  {
    field: 'creator_name',
    label: '创建人'
  },
  {
    field: 'update_time',
    label: '修改时间'
  },
  {
    field: 'updater_name',
    label: '修改人'
  }
])

const submit = (bool: boolean) => {
  let confirm_text =
    0 == form.value.logistics_fee && 5 == form.value.review_node
      ? '当前订单物流费用为0，是否确认审核通过？'
      : t('common.message.review')

  confirm_text = bool ? t('common.message.review') : t('common.message.reject')
  ElMessageBox.confirm(confirm_text, t('purchase.logistics.tips'), {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const resp = await approvedDataApi(query.id as string, {
        is_approved: bool ? 1 : 0
      })
      if (resp.code === 0) {
        ElMessage.success(t('common.operateSucMsg'))
        push('/order/order-management/detail?id=' + query.id)
      }
    })
    .catch(() => {})
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getOrderEnumApi({ field: 'all' })
  receiptMethodList.value = resp.data.delivery_method
  orderStatusList.value = resp.data.status
  paymentStatusList.value = resp.data.pay_status
  paymentMethodList.value = resp.data.pay_method
  brandList.value = resp.data.brand
  currentList.value = resp.data.currency
  warehouseList.value = resp.data.warehouse
  warehouseTypeList.value = resp.data.is_futures
  agingList.value = resp.data.prescription
  logisticsCompanyList.value = resp.data.logistics_company
  itemPayStatusList.value = resp.data.item_pay_status
  reviewNodeList.value = resp.data.review_node
  operatorList.value = resp.data.operator
}

const initialize = async () => {
  const resp = await getReviewDetailApi((query.id as string) || '')
  form.value = resp.data
  itemList.value = resp.data.itemList
  originalItemList.value = resp.data.originalItemList
  console.log(originalItemList.value)
  console.log(itemList.value)
  payTableList.value = resp.data.payment
  selfPickupTableList.value = resp.data.pickup
  receivingTableList.value = [resp.data.delivery]
  logisticsTableList.value = resp.data.logistics

  timeLineList.value = resp.data.logger
  source.value = query.source as string
}
onMounted(() => {
  getDropDownBoxInfo()
  initialize()
})
</script>
<style lang="less" scoped></style>
